<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <div class="header">
        <div class="logo">
            <h1><a href="#"><img src="../images/logo.png" alt=""></a></h1>
        </div>
    </div>
    <div class="content">
        <div class="shadow">
            <a href="#"></a>
        </div>
        <div class="login">
            <div class="qrCode">
                <a href="#">
                    <i class="iconfont icon">&#xe605</i>
                    <div class="triangle"></div>
                </a>
                <div class="tips">
                    <p>扫码登录更安全</p>
                    <span class="one">
                        <em class="two"></em>
                    </span>
                </div>
            </div>

            <div class="loginTitle">
                <ul>
                    <li class="borderBottom pwdLogin"><a href="#">密码登录</a></li>
                    <li class="smsLogin"><a href="#">短信登录</a></li>
                </ul>
            </div>
            <div class="loginBar">
                <div class="warning">
                    <div class="symbol">!</div>
                    <p class="msg">请输入</p>
                </div>
                <div class="oneInput">
                    <div class="account">
                        <div class="label">
                            <i class="iconfont userIcon">&#xe608</i>
                        </div>
                        <input type="text" class="user" placeholder="会员名/手机号/邮箱">
                    </div>

                    <div class="phoneBar">
                        <div class="label">
                            <i class="iconfont phoneIcon">&#xe61c</i>
                        </div>
                        <div class="telephone">
                            <div class="region">
                                <select name="" id="">
                                    <option value="86">+86 &emsp;&emsp;中国大陆</option>
                                    <option value="852">+852 &emsp;&emsp;中国香港</option>
                                    <option value="853">+853 &emsp;&emsp;中国澳门</option>
                                    <option value="886">+886 &emsp;&emsp;中国台湾</option>
                                    <option value="82">+82 &emsp;&emsp;韩国棒子</option>
                                    <option value="81">+81 &emsp;&emsp;小日子过的不错的日本选手</option>
                                    <option value="1">+1 &emsp;&emsp;美国</option>
                                    <option value="1">+1 &emsp;&emsp;加拿大</option>
                                </select>
                            </div>
                            <input type="text" class="phone" placeholder="请输入手机号">
                        </div>
                    </div>
                </div>
                <div class="twoInput">
                    <div class="password">
                        <div class="label">
                            <i class="iconfont pwdIcon">&#xe62f</i>
                        </div>
                        <input type="password" class="pwd" placeholder="请输入登录密码">
                    </div>
                    <div class="codeBar">
                        <div class="label">
                            <i class="iconfont codeIcon">&#xe648</i>
                        </div>
                        <input type="text" class="code" placeholder="请输入验证码">
                        <a href="" class="send">发送验证码</a>
                    </div>
                </div>
                <div class="loginBtn">
                    <a href="#" class="btn">登录</a>
                </div>
                <div class="otherLogin">
                    <div class="sina">
                        <a href="#" class="clearfix">
                            <i class="iconfont sicon">&#xe63c</i>
                            <p><span>微博登录</span></p>
                        </a>
                    </div>
                    <div class="Alipay">
                        <a href="#" class="clearfix">
                            <i class="iconfont aicon">&#xe607</i>
                            <p><span>支付宝登录</span></p>
                        </a>
                    </div>
                </div>
                <div class="loginLink">
                    <ul>
                        <li><a href="#">忘记密码</a></li>
                        <li><a href="#">忘记用户名</a></li>
                        <li><a href="./register.html">免费注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    $(".pwdLogin").click(function () {
        $(this).addClass("borderBottom");
        $(this).next().removeClass("borderBottom");
        $(".account").css({ display: "flex" });
        $(".password").css({ display: "flex" });
        $(".phoneBar").css({ display: "none" });
        $(".codeBar").css({ display: "none" });

        $(".loginLink").children().children().eq(0).css({ display: "block" });
        $(".loginLink").children().children().eq(1).css({ display: "block" });
    })
    $(".smsLogin").click(function () {
        $(this).addClass("borderBottom");
        $(this).prev().removeClass("borderBottom");
        $(".phoneBar").css({ display: "flex" });
        $(".codeBar").css({ display: "flex" });
        $(".account").css({ display: "none" });
        $(".password").css({ display: "none" });
        $(".loginLink").children().children().eq(0).css({ display: "none" });
        $(".loginLink").children().children().eq(1).css({ display: "none" });
    })

    //登录

    $(".btn").click(async function () {
        var user = $(".user").val();
        var pwd = $(".pwd").val();

        var result = await loginAccount({ user, pwd });
        console.log(result);
        var { status, msg, list } = result;
        if (status) {
            var { user } = list;
            $(".warning").css({ display: "none" });
            setCookie("lgc", user);
            var url = urlParse();
            if (url.returnUrl) {
                location.href = decodeURIComponent(url.returnUrl);
            } else {
                location.href = "./index.html";
            }
        } else {
            if ($(".user").val() && $(".pwd").val()) {
                $(".warning").css({ display: "block" }).children(".msg").text(msg);
            } else {
                $(".warning").css({ display: "block" }).children(".msg").text("请输入账号或密码");
            }
        }
    })

    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) {
            var str = search.substr(1);
            var list = str.split("&");
            for (var i = 0; i < list.length; i++) {
                var key = list[i].split("=")[0];
                var val = list[i].split("=")[1];
            }
            data[key] = val;
        }
        return data;
    }

</script>

</html>